<template>
	<view class="wrap">
		<u--form :model="form" ref="uForm" :rules="rules" labelPosition="left" labelWidth="80">
			<u-form-item label="帐号:"  prop="username" borderBottom>
			    <u-input v-model="form.username" :clearable="true" :focus="true" placeholder="请输入注册邮箱" border="none"/>
			</u-form-item>
			<u-form-item label="昵称:"  prop="nickname" borderBottom>
			    <u-input v-model="form.nickname" :clearable="true" placeholder="请输入昵称" border="none"/>
			</u-form-item>
			<u-form-item label="密码:"  prop="password" borderBottom>
			    <u-input v-model="form.password" :password="true" placeholder="请输入密码" border="none"/>
			</u-form-item>
			<u-form-item label="确认密码:"  prop="againPassword" borderBottom>
			    <u-input v-model="form.againPassword" :password="true" placeholder="请再次输入密码" border="none"/>
			</u-form-item>
			<u-form-item label="验证码:"  prop="code" borderBottom>
			    <u-input v-model="form.code" placeholder="请输入验证码" border="none"/>
					<view slot="right" class="codeWrap"  @click="refreshCode">
						<mp-html class="code" :content="svg"></mp-html>
						<text class="change">换一张</text>
					</view>
				</u-input>
			</u-form-item>
		</u--form>
		<u-button text="注册" type="success" @click="submit"></u-button>
		<view class="backLogin">
			<text class="backLogin_btn" @click="backLogin">返回登录页</text>
			<u-tag type="error" shape="circle" text="下载APP" size="mini"></u-tag>
		</view>
		<u-popup :show="show" mode="center" :round="10" bgColor="transparent">
			<u-count-down
				:time="5* 1000"
				format="ss:SSS"
				:autoStart="true"
				millisecond
				@change="onChange"
				@finish="finish">
				<view class="time">
					<text class="time_title">
						注册成功！
					</text>
					<text class="time_content">
						系统将于&nbsp;<text class="time_content_date">{{ timeData.seconds }}</text>&nbsp;秒后自动为您登录跳转！
					</text>
				</view>
			</u-count-down>
		</u-popup>
	</view>
</template>

<script>
	import {mapMutations} from 'vuex'
	export default {
		data() {
			return {
				form:{
					username:'',
					nickname:'',
					password:'',
					againPassword:'',
					code:''
				},
				svg:'',
				show:false,
				timeData:{},
				rules:{
					username:[
						{
							required: true,
							message: '请输入邮箱',
							trigger: ['blur', 'change'],
						},
						{
							type:'email',
							message:'请输入正确的邮箱',
							trigger:['blur']
						}
					],
					nickname:[
						{
							required:true,
							message:'请输入昵称',
							trigger:['blur','change']
						}
					],
					password:[
						{
							required: true,
							message: '请输入密码',
							trigger: ['blur', 'change'],
						},
						{
							min:6,
							message:'密码的长度至少6位',
							trigger:['blur','change']
						}
					],
					againPassword:[
						{
							required:true,
							message:'请输入密码',
							trigger:['blur','change']
						},
						{
							validator: (rule, value, callback) => {
								return value === this.form.password
							},
							message: '输入的密码不一致',
							trigger:['blur','change']
						}
					],
					code:[
						{
							required: true,
							message: '请输入验证码',
							trigger: ['blur', 'change'],
						},
						{
							len:4,
							message:'验证码长度4位',
							trigger:['blur','change']
						}
					]
				}
			}
		},
		computed:{
			sid(){
				return this.$store.state.auth.sid
			}
		},
		mounted(){
			this.getCaptcha()
		},
		methods:{
			onChange(e){
				this.timeData = e
			},
			async getCaptcha () {
				const {code,data} = await this.$axios.api.getCaptcha({sid:this.sid})
				if(code===200){	
					this.svg = data
				}
			},
			refreshCode(){
				this.getCaptcha()
			},
			...mapMutations(['setUserInfo','setToken','setRefreshToken']),
			submit(){
				this.$refs.uForm.validate().then(async res => {
					const {code,msg} = await this.$axios.api.register({
						username:this.form.username,
						nickname:this.form.nickname,
						password:this.form.password,
						code:this.form.code,
						sid:this.sid
					})
					if(code === 200){
						this.show=true
						const {code,data,token,refreshToken} = await this.$axios.api.login({
							username: this.form.username,
							password: this.form.password,
							code: this.form.code,
							sid: this.sid
						})
						if(code===200){
							data.username=this.form.username
							this.setUserInfo(data),
							this.setToken(token),
							this.setRefreshToken(refreshToken)
						}
					}else if(code === 401){
						uni.showToast({
							title:msg,
							icon:'none',
							duration:2000
						})
					}else if(code ===404){
						uni.showToast({
							title:msg,
							icon:'none',
							duration:2000
						})
					}else if(code === 500){
						uni.showToast({
							title:msg,
							icon:'none',
							duration:2000
						})
					}
				})
			},
			finish(){
				this.show=false
				uni.navigateBack({
					delta: 1
				})
			},
			backLogin(){
				this.$emit('loginOrRegister',true)
			}
		}
	}
</script>

<style lang="scss">
.wrap{
	width: 100%;
	min-height: 600rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	.codeWrap{
		display: flex;
		flex-direction: column;
		align-items: center;
		.code{
			width: 180rpx;
			line-height: 60rpx;
		}
		.change{
			color: $u-success;
		}
	}
	.backLogin{
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 24rpx;
		&_btn{
			width: 140rpx;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			font-size: 26rpx;
			color: #007AFF;
			font-weight: bold;
		}
	}
	.time{
		height: 200rpx;
		padding: 0 20rpx;
		border-radius: 20rpx;
		background-color: rgb(171, 255, 223);
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		&_title{
			color:$u-success;
			font-size: 28rpx;
			font-weight: bold;
		}
		&_content{
			color:#666666;
			font-size: 24rpx;
			&_date{
				color: #ff5500;
				font-size: 26rpx;
			}
		}
	}
}
</style>
